<template>
  <Modal
    ref="modal"
    title="快递供应商"
    width="1000px"
    :before-show="beforeShow"
  >
    <template #reference>
      <slot />
    </template>
    <div class="trajectory-wrap">
      <div
        v-for="(item,index) in trajectoryData"
        :key="index"
        class="trajectory"
      >
        {{ index+1 }}. {{ item.nodeUpdateTime }} {{ item.details }} {{ item.status }}
      </div>
    </div>
    <template #footer>
      <div class="text-center">
        <el-button
          type="primary"
          @click="() => $refs.modal.hide()"
        >
          确定
        </el-button>
      </div>
    </template>
  </Modal>
</template>

<script>
import { trackDetail } from '@/api/express'

export default {
    components: {
        Modal: () => import('@/components/Modal'),
    },
    props: {
        value: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            trajectoryData: [],
        }
    },
    watch: {},
    created() {},
    methods: {
        async beforeShow() {
            await this.getDetail()
        },
        async getDetail() {
            const res = await trackDetail({
                trackId: this.value.id,
                supplier: this.value.supplier,
            })
            this.trajectoryData = res.data
        },
    },
}
</script>
<style scoped lang="scss">
  .trajectory-wrap {
    max-height: 500px;
    overflow: auto;
    .trajectory {
      height: 30px;
      line-height: 30px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
</style>